import { type PropsWithChildren } from "react";
import { Button, Switch } from 'antd';
import { AlignLeftOutlined } from '@ant-design/icons';
import Func from './func'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import { useEnvStore } from '@/stores/env';
import { useShallow } from 'zustand/react/shallow';

type Props = {

}

const App = function ({ }: PropsWithChildren<Props>) {
  const { isExpandedSidebar, setExpandSidebar } = useEnvStore(useShallow((state) => ({
    isExpandedSidebar: state.isExpandedSidebar,
    setExpandSidebar: state.setExpandSidebar,
  })))

  return (
    <section className="flex justify-between px-2 pr-7 items-center w-full h-full">
      <Button
        type="text"
        icon={isExpandedSidebar ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => {
          if (isExpandedSidebar) {
            setExpandSidebar(false)
          } else {
            setExpandSidebar(true)
          }
        }}
        style={{
          borderRadius: 0,
          fontSize: '16px',
          width: 64,
          height: 64,
        }} />
      {/* <Breadcrumb /> */}
      {/* <Switch
        checkedChildren={<AlignLeftOutlined />}
        unCheckedChildren={<AlignLeftOutlined />}
        defaultChecked /> */}
      <Func />
    </section>
  )
}

export default App